<template>
  <el-date-picker v-model="time" range-separator="至" v-bind="formAttr" />
</template>

<script setup>
const startTime = defineModel('start', { type: String, default: '' })
const endTime = defineModel('end', { type: String, default: '' })

const attr = useAttrs()

const formAttr = computed(() => {
  return {
    type: 'datetimerange',
    valueFormat: 'YYYY-MM-DD HH:mm:ss',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间',
    editable: false,
    ...attr,
  }
})

const time = computed({
  get() {
    return [startTime.value, endTime.value]
  },
  set(val) {
    startTime.value = val?.[0] ?? ''
    endTime.value = val?.[1] ?? ''
  },
})
</script>
